import Vue from 'vue'
import VueRouter from 'vue-router'

//解决：编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误(声明式导航不会)
// 重写VueRouter原型对象的push和replace属性
// 先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
// call和apply区别
// 相同点：都可以调用函数一次，都可以改变this的指向
// 不同点：call与apply传递参数：call传递参数用逗号隔开，apply传递参数用数组形式
VueRouter.prototype.push = function (location, res, err) { 
    // 如果传入了这两个参数
    if (res && err) {
        originPush.call(this, location, res, err)
    } else { 
        // 如果没有传入res和err，则手动添加上两个回调函数
        originPush.call(this, location, () => { }, () => { })
    }
}

Vue.use(VueRouter)

const routes = [
  {
    path:'/home',//路由的路径
    component:()=>import('@/views/Home/home'),//路由懒加载
    meta:{//路由元信息，判断是否显示或隐藏头部和底部tabBar，可以通过this.$route拿到meta中的对象
      show:true,
      keepAlive:true,//判断页面是否需要缓存
      title:'首页-青年酷站移动端'
    },
  },
  {
    path:'',
    // 路由重定向
    redirect:'/home',
    meta:{
      show:true,
      keepAlive:true,//判断页面是否需要缓存
    }
  },
  {
    // 当该路径不存在的时候，就跳转到首页路由
    path:'*',
    // 路由重定向
    redirect:'/home',
    meta:{
      show:true,
      keepAlive:true,//判断页面是否需要缓存
    }
  },
  {
    path:'/list',
    component:()=>import('@/views/List/list'),
    meta:{
      show:true,
      keepAlive:true,//判断页面是否需要缓存
      title:'分类-青年酷站移动端'
    }
  },
  {
    path:'/art',
    component:()=>import('@/views/Art/Art'),
    meta:{
      show:true,
      keepAlive:true,//判断页面是否需要缓存
      title:'文章-青年酷站移动端'
    }
  },
  {
    path:'/ins',
    component:()=>import('@/views/Ins/Ins'),
    meta:{
      show:true,
      keepAlive:true,//判断页面是否需要缓存
      title:'灵感-青年酷站移动端'
    }
  },
  {
    path:'/my',
    component:()=>import('@/views/My/My'),
    meta:{
      show:true,
      title:'个人-青年酷站移动端'
    }
  },
  {
    path:'/detail',
    component:()=>import('@/views/Detail/Detail'),
    meta:{
      show:false,
      title:'详情-青年酷站移动端'
    }
  },
  {
    path:'/search',
    component:()=>import('@/views/Search/search'),
    meta:{
      show:false,
      title:'搜索-青年酷站移动端',
      keepAlive:true,//判断页面是否需要缓存
    }
  }
  
]

const router = new VueRouter({
  routes,
  // 滚动行为：进行路由跳转时/刷新，让浏览器导航条回到顶部
  scrollBehavior (to, from, savedPosition) {
    return {y: 0 }
  }
})

// 全局前置路由守卫-在进行路由跳转之前做些什么，经常用于设置网站的title，判断登录...
router.beforeEach((to,from,next)=>{//参数：to到哪里去，from从哪里来，next放行
  document.title=to.meta.title
  next()
})

export default router
